import { useEffect, useContext } from 'react'
import { useGetBannerList } from '../../hook'
import MyCard from '../MyCard'
import { Skeleton } from 'antd'
import { Context } from '@/pages/Home'
import Loading from '../Loding'

const MySwiper = () => {
  const updateCard = useContext(Context)
  const { banner, setBannner, updateBannerList, loading } = useGetBannerList()

  useEffect(() => {
    if (updateCard.bannerVOList) {
      setBannner(updateCard)
    } else {
      updateBannerList()
    }
  }, [updateCard, updateBannerList])

  return (
    <>
      {loading ? (
        <Skeleton.Avatar shape={'square'} active />
      ) : (
        <MyCard banner={banner} />
      )}
    </>
  )
}

export default MySwiper
